// 导入路由相关的组件
// BrowserRouter：类似于vue中的history路由模式
// HashRouter：类似于vue中的hash路由模式
// Link：用于定义路由链接：类似于vue中的router-link组件
// Routes：是路由容器，在里面定义所有路由打开的页面
// Route：用于配置单个路由页面，它有两个重要的属性：path(指定路由地址)和element(指定路由组件)
import {BrowserRouter, Link, Routes, Route} from 'react-router-dom'

// 导入App组件的样式
import './App.scss';

// 导入页面组件
import Home from './views/1_Home/home'
import About from "./views/2.1_路由跳转1_关于/about";
import City from "./views/2.2路由跳转页1_城市/city";
import Phone from "./views/2.3路由跳转页2_手机/phone";
import First, {Page1, Page2, Page3, Page4} from "./views/3_路由嵌套,多级路由/first"
import NotFount from './views/路由未识别404页面/notFount'
import MyPage1 from "./views/4_Redux状态管理器/page1"
import MyPage2 from "./views/5_Mobx状态管理器/page2"
import MyPage3 from "./views/6_配置代理服务器-第三方组件库应用/page3"

// Provider组件用于在全局注入全局状态
import {Provider} from 'react-redux'
// 导入创建好的store对象，并注入到全局中
import store from "./store";

// lazy用于懒加载组件
// 采用懒加载的路由组件，必须要配合Suspense组件才能显示
import {lazy, Suspense} from "react";
// 采用懒加载方式导入组件
const MyPage4 = lazy(() => import("./views/7_富文本编辑器/page4"))

// 采用函数方式创建App组件
function App() {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <div className="App">
                    <div className="nav">
                        <Link to='/'>首页</Link>
                        <Link to='/about'>关于</Link>
                        <Link to='/first'>一级路由</Link>
                        <Link to='/page1'>redux状态管理器</Link>
                        <Link to='/page2'>mobx状态管理器</Link>
                        <Link to='/page3'>代理服务器</Link>
                        <Link to='/page4'>富文本编辑器</Link>
                    </div>
                    {/* Suspense用于呈现懒加载的路由，通过fallback属性设置加载过程中的显示内容 */}
                    <Suspense fallback={
                        <div>
                            <img src="" alt=""/>
                            <div>loading....</div>
                        </div>
                    }>
                        {/* 一级路由的出口 */}
                        <Routes>
                            <Route path='/' element={<Home></Home>}></Route>
                            <Route path='/about' element={<About></About>}></Route>
                            <Route path='/city' element={<City></City>}></Route>
                            {/* 注意：params方式传递路由参数，需要修改path中指定参数名称 */}
                            <Route path='/phone/:id' element={<Phone></Phone>}></Route>
                            {/* 这里注册一级路由 */}
                            <Route path='/first' element={<First></First>}>
                                {/* 这里注册二级路由,注意：index属性表示默认打开此路由 */}
                                <Route index element={<Page1></Page1>}></Route>
                                <Route path='page2' element={<Page2></Page2>}>
                                    {/* 这里注册三级路由,多级路由一层一层往下嵌套 */}
                                    <Route index element={<Page3></Page3>}></Route>
                                    <Route path='page4' element={<Page4></Page4>}></Route>
                                </Route>
                            </Route>
                            {/* 4_Redux状态管理器 */}
                            <Route path='/page1' element={<MyPage1></MyPage1>}></Route>
                            {/* 5_Mobx状态管理器 */}
                            <Route path='/page2' element={<MyPage2></MyPage2>}></Route>
                            {/* 6_配置代理服务器-第三方组件库应用 */}
                            <Route path='/page3' element={<MyPage3></MyPage3>}></Route>
                            {/* 7_富文本编辑器 */}
                            <Route path='/page4' element={<MyPage4></MyPage4>}></Route>
                            {/* 当输入的路径没有匹配到时，加载该404路由 */}
                            <Route path='*' element={<NotFount></NotFount>}></Route>
                        </Routes>
                    </Suspense>
                </div>
            </BrowserRouter>
        </Provider>
    );
}

export default App;
